@import 'tailwindcss';

@config '../../tailwind.config.js';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility no-scrollbar {
  /* Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark,
  [data-theme='dark'] {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --radius: 0.5rem;
    --prose-body: 0 0% 79%;
    --prose-headings: 222 17% 11%;
    --prose-lead: 220 9% 35%;
    --prose-links: 220 39% 84%;
    --prose-bold: 0 0% 87%;
    --prose-counters: 220 10% 46%;
    --prose-bullets: 220 13% 84%;
    --prose-hr: 220 13% 91%;
    --prose-quotes: 222 17% 11%;
    --prose-quote-borders: 220 13% 91%;
    --prose-captions: 220 10% 46%;
    --prose-kbd: 222 17% 11%;
    --prose-kbd-shadows: 222 38% 11%;
    --prose-code: 222 17% 11%;
    --prose-pre-code: 220 13% 91%;
    --prose-pre-bg: 222 19% 16%;
    --prose-th-borders: 220 13% 84%;
    --prose-td-borders: 220 13% 91%;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}

article img {
  display: inline;
}

.prose-outstatic {
  max-width: 50rem;
}

.prose-outstatic :where(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 100px;
  position: relative;
  display: block;
  margin-right: 0.5rem;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  @apply text-foreground;
}

.prose-outstatic code:not(:where([data-theme])) {
  @apply rounded-md border border-secondary px-1 py-1 font-normal text-secondary-foreground bg-secondary;
}

.prose-outstatic
  :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  @apply px-4 pb-4 pt-6 border dark:border-slate-700 rounded-md bg-gray-800 dark:bg-gray-800 text-white dark:text-gray-800;
}

@media (min-width: 768px) {
  .md\:prose-xl.prose-outstatic
    :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
    @apply pt-8;
  }
}

.prose-outstatic
  :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  @apply px-0 py-1 bg-gray-800 dark:bg-gray-800 text-white;
}

.prose-outstatic
  pre
  :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  @apply bg-transparent dark:bg-transparent border-0 whitespace-break-spaces;
}

.prose-outstatic
  :where(code):not(
    :where([class~='not-prose'], [class~='not-prose'] *)
  )::before,
.prose-outstatic
  :where(code):not(
    :where([class~='not-prose'], [class~='not-prose'] *)
  )::after {
  content: '';
}

.prose-outstatic blockquote p:first-of-type::before,
.prose-outstatic blockquote p:last-of-type::after {
  content: '';
}

.prose-outstatic :where(pre code):not(:where([class~='not-prose'] *)) {
  font-size: 1rem;
}

.prose-outstatic :where(h1, h2, h3, h4, h5, h6):hover {
  text-decoration: underline;
}

/** HASH ANCHOR */
.hash-anchor {
  @apply inset-y-0 w-full absolute transition-none bg-none text-foreground;
}

.hash-anchor:hover {
  @apply underline;
}

.hash-anchor:hover:after,
.hash-anchor:focus:after {
  visibility: visible;
}

.hash-anchor:after {
  @apply invisible absolute -right-5 top-1/2 -translate-y-1/2 text-lg;
  content: '#';
}

/* Docs */
.docs img {
  @apply border;
}

.sidebar .prose :where(ul):not(:where([class~='not-prose'] *)) {
  padding-left: 0;
}

.sidebar .prose :where(li):not(:where([class~='not-prose'] *)) {
  list-style: none;
  padding-left: 1rem;
}

.sidebar .prose > ul > li:has(> ul) {
  margin-bottom: 1rem;
}
